<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>同咨科技-系统设置</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="../../static/css/weadmin.css">
	<link href="../../lib/layui/css/layui.css" rel="stylesheet">

	<script type="text/javascript" src="../../lib/layui/layui.js" charset="utf-8"></script>
	<script type="module" src="../components/use-body.js"></script>

	<link href="../../static/css/system.css" rel="stylesheet">
	<link href="../../static/css/uselay.css" rel="stylesheet">

</head>

<body>
	<use-body>
		<div class="page-body">

			<!-- 左边菜单 -->
			<div class="side">
				<span class="layui-breadcrumb breadcrumb" lay-separator="/">
					<a><i title="首页" class="iconfont use-more"></i></a>
					<a><cite>系统设置</cite></a>
				</span>

				<div class="layui-panel">
					<ul class="layui-menu" id="demo-menu">
						<li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: false}">
							<div class="layui-menu-body-title">部门</div>
							<ul>
								<li class="layui-menu-item-checked">
									<div class="layui-menu-body-title">部门管理</div>
								</li>
								<li class="layui-menu-item-group layui-menu-item-up" lay-options="{type: 'group'}">
									<div class="layui-menu-body-title">
										员工管理 <i class="layui-icon layui-icon-down"></i>
									</div>
									<ul>
										<li>
											<div class="layui-menu-body-title">
												XXXXXX有限公司
											</div>
										</li>
										<li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group', isAllowSpread: true}">
											<div class="layui-menu-body-title">
												总裁办 <i class="layui-icon layui-icon-up"></i>
											</div>
											<ul>
												<li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group', isAllowSpread: true}">
													<div class="layui-menu-body-title">
														华南区域 <i class="layui-icon layui-icon-up"></i>
													</div>
													<ul>
														<li>华南一部</li>
													</ul>
												</li>
											</ul>
										</li>
										<li>
											<div class="layui-menu-body-title">行政部</div>
										</li>
									</ul>
								</li>
								<li>
									<div class="layui-menu-body-title">角色管理</div>
								</li>
							</ul>
						</li>
						<li class="layui-menu-item-divider"></li>
						<li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: false}">
							<div class="layui-menu-body-title">企业</div>
							<ul>
								<li>
									<div class="layui-menu-body-title">企业信息</div>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>

			<!-- 主体 -->
			<div class="system page-border">
				<div class="system-title">部门管理</div>
				<!-- 搜索 -->
				<div class="search-box">
					<div class="layui-input-wrap">
						<div class="layui-input-prefix">
							<i class="iconfont  use-search"></i>
						</div>
						<input type="text" placeholder="Search..." class="layui-input">
					</div>
					<div class="btn-box">
						<button type="button" class="layui-btn layui-btn-primary layui-btn-radius">
							<i class="iconfont  use-search"></i>
							搜索
						</button>
						<button type="button" class="layui-btn layui-btn-normal layui-btn-radius" lay-on="add">新建部门</button>
					</div>
				</div>

				<div class="table-data">
					<table class="layui-hide" id="ID-treeTable-demo"></table>
					<!-- 工具栏模板 -->
					<script type="text/html" id="operate">
						<div class="operate">
							<i class="iconfont use-edit layui-btn btn-text" lay-on="add"></i>
							<i class="iconfont use-delete layui-btn btn-text" lay-on="delete"></i>
						</div>
					</script>
				</div>
			</div>
		</div>
	</use-body>
	<!--弹框-->
	<div id="add-layui" style="display: none;">
		<div class="dialog" style="width: 540px;">
			<form class="layui-form">
				<div class="m-box">
					<div class="layui-form-item">
						<label class="layui-form-label required">部门名称</label>
						<div class="layui-input-block">
							<input type="text" name="username" placeholder="输入内容" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">上级部门</label>
						<div class="layui-input-block">
							<select name="interest" lay-filter="aihao">
								<option value="">选择部门</option>
								<option value="0">技术部</option>
							</select>
						</div>
					</div>
				</div>
				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label">部门描述</label>
					<div class="layui-input-block">
						<textarea placeholder="输入描述内容" class="layui-textarea" name="desc"  oninput="maxlength(this, '.text-count')" maxlength="100"></textarea>
					</div>
					<div class="layui-form-label layui-prompt">
						<span class="text-count">0</span>/100
					</div>
				</div>
			</form>
			<div class="dialog-footer">
				<div class="cent">
					<button type="button" class="layui-btn btn-text">取消</button>
					<button type="button" class="layui-btn layui-btn-radius">保存</button>
				</div>
			</div>
		</div>
	</div>

	<!-- 删除弹窗 -->
	<div id="del-layer" style="display: none;">
		<div class="dialog" style="width: 540px;">
			<div class="confirm-dialog">
				<img class="icon" src="../../static/images/warn.png" alt="">
				<div>
					<div class="title"><strong>是否要删除所选资料？</strong></div>
					<p class="describe">删除后，该无法恢复数据</p>
				</div>
			</div>
	
			<div class="dialog-footer">
				<!-- 主体 -->
				<div class="cent">
					<button type="button" class="layui-btn btn-text">取消</button>
					<button type="button" class="layui-btn layui-btn-danger layui-btn-radius">确认</button>
				</div>
			</div>
		</div>
	</div>

</body>
<script>
	layui.use(['jquery', 'layer'], function () {
		var $ = layui.$;
		var util = layui.util;
		var form = layui.form
		var treeTable = layui.treeTable;
		var layer = layui.layer;
		var element = layui.element;
		// 渲染
		var inst = treeTable.render({
			elem: '#ID-treeTable-demo',
			// url: './demo-1.json?page=1&limit=10', // 此处为静态模拟数据，实际使用时需换成真实接口
			data: [
				{
					"id": 1,
					"name": "市场部",
					"experience": 43884,
					"sex": "部门描述内容内容内容",
					"city": "路人甲",
					"createTime": "2023-03-15 15:33",
					"children": [
						{
							"id": 2,
							"name": "施工一部",
							"experience": 43884,
							"sex": "部门描述内容内容内容",
							"city": "路人甲",
							"createTime": "2023-03-15 15:33",
							"children": [
								{
									"id": 3,
									"name": "施工一部",
									"experience": 43884,
									"sex": "部门描述内容内容内容",
									"city": "路人甲",
									"createTime": "2023-03-15 15:33",
									"children": [
										{
											"id": 4,
											"name": "施工一部",
											"experience": 43884,
											"sex": "部门描述内容内容内容",
											"city": "路人甲",
											"createTime": "2023-03-15 15:33",
											"children": [],
											"isParent": false
										},
									],
									"isParent": true
								},
								{
									"id": 7,
									"name": "施工一部",
									"experience": 43884,
									"sex": "部门描述内容内容内容",
									"city": "路人甲",
									"createTime": "2023-03-15 15:33",
									"children": [],
									"isParent": false
								}
							],
							"isParent": true
						}
					],
					"isParent": true
				},
				{
					"id": 9,
					"name": "施工部",
					"experience": 43884,
					"sex": "部门描述内容内容内容",
					"city": "路人甲",
					"createTime": "2023-03-15 15:33",
					"children": [],
					"isParent": false
				},
			],
			tree: {
				/*
				// 异步加载子节点
				async: {
					enable: true,
					url: '/static/2.8/json/treeTable/demo-async.json', // 此处为静态模拟数据，实际使用时需换成真实接口
					autoParam: ["parentId=id"]
				}
				*/
				view: {
					showIcon: false
				}
			},
			maxHeight: '470px',
			cols: [[
				{ field: 'name', title: '部门名称', minWidth: 200, },
				{ field: 'experience', title: '部门人数', width: 155, },
				{ field: 'sex', title: '部门描述', width: 258, },
				{ field: 'createTime', title: '更改时间', width: 220, },
				{ field: 'city', title: '更改人', width: 180, },
				{ fixed: "right", title: "操作", width: 120, align: "center", toolbar: "#operate", fixed: "right" }
			]],

			page: true
		});


		// 新建部门
		util.on('lay-on', {
			
			'add': function () {
				layer.open({
					type: 1,
					title: '新建部门',
					content: $('#add-layui'), // 捕获的元素
					success: function (layero) {
						//把内容放到遮罩层里
						var mask = $(".layui-layer-shade");
						mask.appendTo(layero.parent());
					}
				});
			},

			'delete': function() {
				layer.open({
					type: 1,
					title: false,
					closeBtn: 0,
					content: $('#del-layer'), // 捕获的元素
					success: function (layero, index, that) {
						//把内容放到遮罩层里
						var mask = $(".layui-layer-shade");
						mask.appendTo(layero.parent());
						
						// 绑定自定义的 tab 元素
						element.tab({
							headerElem: '#tabHeader>.layui-btn',
							bodyElem: '#tabBody>div'
						})

					}
				})
			}
		})

		// 字数显示
		window.maxlength = function (obj, id) {
			var curr = $(obj).val().length;
			var length = $(obj).attr('maxlength');
			if (curr > length) {
				layer.msg('字数请在' + length + '字以内');
			} else {
				$(id).text(curr);
			}
		}

	})
</script>

</html>